import { CSSProperties, ReactNode } from "react";
import { View } from "@tarojs/components";
import { cva } from "class-variance-authority";

const vars = cva("absolute", {
  variants: {
    position: {
      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
      bottom: "w-screen bottom-0 left-0",
    },
  },
});

// watch(visible, flag => {
//   // @ts-expect-error
//   Taro.setPageStyle({
//     style: {
//       overflow: flag ? 'hidden' : 'auto'
//     }
//   });
// })

type ByPopupProps = {
  style?: CSSProperties | string;
  position?: "center" | "bottom";
  clickMaskClose?: boolean;

  children?: ReactNode;
};

type ByPopupEvent = {
  onMaskClick?: () => void;
};

export default ({
  position = "center",
  children,
  style,

  onMaskClick,
}: ByPopupProps & ByPopupEvent) => {
  return (
    <View
      className="fixed top-0 left-0 w-screen h-screen bg-[#0000002b] z-30"
      // catchtouchmove={true}
      catchMove={false}
      onClick={onMaskClick}
      style={style}
    >
      <View className={vars({ position })}>{children}</View>
    </View>
  );
};
